<template>
  <div id="toot">
      <fieldset>
          <legend>App</legend>
          <div class="container">
              <div class="heading">
                  <div class="img-wrapper">
                    <img src="	http://chst.vip:8081/todolist/static/media/logo.dc230d7c3cb96c91409eaedab952337e.svg
                                " height="80" alt="">
                    </div>
                  <div class="title">To-Do List</div>
              </div>
              <div class="form-field">
                  <h1 class="title">~ 开始努力写代码了 ~</h1>
                  <div class="form-wrapper">
                      <div class="form-input">
                          <input placeholder="添加要做的事儿..." v-model="arr">
                      </div>
                      <button type="submit" class="submit-btn"  @click="handleClick"  >
                          <span >提交</span> 
                      </button>
                  </div>
              </div>
              <ul class="todos">
                <li v-for="item in aa" :key="item">{{item}} <button @click="del(item)">删除</button></li>
                
              </ul>
              <div class="options"><button>全部</button><span
                      style="color: red; margin-right: 5px; font-size: 18px;">0</span><span>条事项</span><button>已完成:<span
                          style="color: red; margin-right: 5px; font-size: 18px;">0</span></button><button>未完成:<span
                          style="color: red; margin-right: 5px; font-size: 18px;">0</span></button></div>
          </div>
     
      </fieldset>
  </div>
</template>
<style>

  div {
      display: block;
  }

  fieldset {
      display: block;
      margin-inline-start: 2px;
      margin-inline-end: 2px;
      padding-block-start: 0.35em;
      padding-inline-start: 0.75em;
      padding-inline-end: 0.75em;
      padding-block-end: 0.625em;
      min-inline-size: min-content;
      border-width: 2px;
      border-style: groove;
      border-color: rgb(192, 192, 192);
      border-image: initial;
      width: 440px;
      margin: 0 auto;
  }

  legend {
      display: block;
      padding-inline-start: 2px;
      padding-inline-end: 2px;
      border-width: initial;
      border-style: none;
      border-color: initial;
      border-image: initial;
  }

  .container {
      background: #f2f2f2;
      border-radius: 15px;
      display: flex;
      flex-direction: column;
      margin: 0 auto;
      max-width: 100%;
      padding: 30px 40px 20px;
      text-align: center;
      width: 440px;
  }

  .heading {
      align-items: center;
      display: flex;
      justify-content: center;
  }

  .heading .img-wrapper {
      margin-right: 10px;
      width: 80px;
  }

  .heading .title {
      background: #ed0e7a5e;
      border-radius: 20% 5% 20% 5%/5% 20% 25% 20%;
      color: #fff;
      font-size: 21px;
      padding: 0.25em 0.8em 0.15em;
      -webkit-transform: rotate(3deg);
      transform: rotate(3deg);
      -webkit-user-select: none;
      user-select: none;
  }

  .form-field {
      margin-top: 25px;
  }

  .form-field .title {
      color: #00bfff;
      font-size: 22px;
      margin-bottom: 18px;
  }

  h1 {
      display: block;
      font-size: 2em;
      margin-block-start: 0.67em;
      margin-block-end: 0.67em;
      margin-inline-start: 0px;
      margin-inline-end: 0px;
      font-weight: bold;
  }

  .form-wrapper {
      display: flex;
      justify-content: center;
  }

  .form-input {
      display: inline-block;
      flex-grow: .65;
      margin-right: 15px;
  }

  .form-input input {
      background: transparent;
      border: 0;
      border-bottom: 3px dashed #00bfff;
      font-size: 18px;
      outline: 0;
      padding: 5px 0 3px;
      width: 100%;
  }

  .submit-btn {
      background-color: initial;
      border: none;
      border-radius: 6px;
      cursor: pointer;
      outline: none;
      position: relative;
      -webkit-transform: rotate(4deg);
      transform: rotate(4deg);
      transition: -webkit-transform .25s cubic-bezier(.175, .885, .32, 1.275);
      transition: transform .25s cubic-bezier(.175, .885, .32, 1.275);
      transition: transform .25s cubic-bezier(.175, .885, .32, 1.275),
          -webkit-transform .25s cubic-bezier(.175, .885, .32, 1.275);
  }

  .submit-btn span {
      background-color: #fff;
      border: 2px solid #494a4b;
      border-radius: inherit;
      display: block;
      font-size: 16.5px;
      padding: 0.34em 0.84em;
      position: relative;
  }

  .submit-btn:before {
      background-color: #fe7345;
      border: 1px solid #494a4b;
      border-radius: inherit;
      content: "";
      height: 100%;
      left: 0;
      position: absolute;
      top: 0;
      -webkit-transform: scaleY(1.1);
      transform: scaleY(1.1);
      -webkit-transform-origin: top;
      transform-origin: top;
      transition: -webkit-transform .25s cubic-bezier(.175, .885, .32, 1.275);
      transition: transform .25s cubic-bezier(.175, .885, .32, 1.275);
      transition: transform .25s cubic-bezier(.175, .885, .32, 1.275), -webkit-transform .25s cubic-bezier(.175, .885, .32, 1.275);
      width: 100%;
  }

  ul {
      list-style: none;
      margin: 0;
      padding: 0;
      text-align: left;

      display: block;
      list-style-type: disc;
      margin-block-start: 1em;
      margin-block-end: 1em;
      margin-inline-start: 0px;
      margin-inline-end: 0px;
      padding-inline-start: 40px;
  }

  .options button {
      background: transparent;
      border: 1px double #00bfff;
      color: #666;
      cursor: pointer;
      font-size: 16px;
      font-weight: bolder;
      margin: 10px;
      outline: 0;
  }

  element.style {
      color: red;
      margin-right: 5px;
      font-size: 18px;
  }
</style>

<script setup>
import {ref} from "vue"

 let arr=ref();
let aa=ref([])
let handleClick =function(){
  aa.value.push(arr.value)
}

let del =function(input){

    let bb=  aa.value.filter(item=>{
       return  item!==input
      })
      aa.value=bb
}


</script>




